<template>
	<view class="page index">
		<empty v-if="empty" desc="该客户已删除"></empty>
		<view v-if="!empty" class="custome-sheet">
			<view class="header">
				<view class="left">
					{{details.name}}
				</view>
				<view v-if="details.cooperationStatus" class="right" style="border-color: #3BBF03; color: #3BBF03;">
					正常
				</view>
				<view v-else class="right" style="border-color: #F44444; color: #F44444;">
					暂停合作
				</view>
			</view>
			<view class="details">
				<view class="det-item">
					<view class="tag">
						客户类型
					</view>
					<view class="value">
						{{details.typeText || ''}}
					</view>
				</view>
				<view class="det-item">
					<view class="tag">
						客户等级
					</view>
					<view class="value">
						{{details.levelText || ''}}
					</view>
				</view>
				<view class="det-item">
					<view class="tag">
						所在地区
					</view>
					<view class="value">
						{{$share.getArea(details.areaName || '')}}
					</view>
				</view>
				<view class="det-item">
					<view class="tag">
						最近签约项目时间
					</view>
					<view class="value">
						{{details.lastSignTime ? $share.getDate(details.lastSignTime) : '无'}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="!empty" class="tab-list">
			<view :class="['tab-item', tabIndex == index && 'tab-select']" v-for="(item, index) in tabList" :key="index" @click="tabIndex = index">
				{{item}}
			</view>
		</view>
		<view v-if="!empty" class="container">
			<customer-message :message="details" v-if="tabIndex == 0"></customer-message>
			<customer-relevent :customerId="id" :name="details.name" v-if="tabIndex == 1"></customer-relevent>
		</view>
		<view v-if="!empty" class="footer">
			<button @click="business">{{details.cooperationStatus ? '暂停' : '恢复'}}业务合作</button>
			<button @click="moreOperation">更多</button>
		</view>
		<!-- 更多操作 -->
		<uni-popup ref="operation" type="center">
			<view class="more-operation">
				<view class="operation-item" @click="edit">
					<span class="iconfont icon" style="color: #101010;">&#xe8ac;</span>
					<span>编辑客户</span>
				</view>
				<view class="operation-item" @click="cancelCustomer">
					<span class="iconfont icon" style="color: #101010;">&#xe603;</span>
					<span>删除客户</span>
				</view>
			</view>
		</uni-popup>
		<!-- 暂停业务合作 -->
		<uni-popup ref="stopTask" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						{{details.cooperationStatus ? '暂停' : '恢复'}}业务合作
					</view>
					<view class="content">
						确定要{{details.cooperationStatus ? '暂停' : '恢复'}}该用户的业务合作吗？
					</view>
				</view>
				<view class="bottom">
					<button class="cancel" @click="$refs.stopTask.close()">取消</button>
					<button class="confire" @click="cooperation">确定</button>
				</view>
			</view>
		</uni-popup>
		<!-- 删除客户 -->
		<uni-popup ref="cancelCustomer" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						删除客户
					</view>
					<view class="content">
						删除后无法恢复，确定要删除该客户吗？
					</view>
				</view>
				<view class="bottom">
					<button class="cancel" @click="$refs.cancelCustomer.close()">取消</button>
					<button class="confire" @click="confireCancel">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import customerMessage from "./components/customerMessage.vue";
	import customerRelevent from "./components/customerRelevant.vue";
	import empty from "@/components/empty.vue";
	import {getCustomerDetailsApi, cooperationApi, deleteCustomerApi} from "@/api/customer_api.js";
	export default{
		components: {
			customerMessage,
			customerRelevent,
			empty
		},
		data(){
			return{
				empty:false,
				tabList:['基本信息', '相关消息'],
				tabIndex:0,
				id:0,//客户id
				details:{},
			}
		},
		onLoad(e) {
			this.id = e.id;
		},
		onShow() {
			uni.showLoading({
				title:'加载中...',
				mask:true
			})
			this.getCustomerDetails();
		},
		methods:{
			// 获取客户详情
			async getCustomerDetails(){
				let res = await getCustomerDetailsApi(this.id).catch(() => {
					uni.hideLoading();
					return Promise.reject();
				})
				this.details = res.data;
				let type = '';
				let level = ''
				switch(this.details.type){
					case 1: {
						type = '个体';
						break;
					}
					case 2: {
						type = '私营';
						break;
					}
					case 3: {
						type = '国营';
						break;
					}
					case 4: {
						type = '党政军';
						break;
					}
					case 5: {
						type = '境外';
						break;
					}
				}
				switch(this.details.level){
					case 1: {
						level = 'A（重要）';
						break;
					}
					case 2: {
						level = 'B（关注）';
						break;
					}
					case 3: {
						level = 'C（一般）';
						break;
					}
				}
				this.$set(this.details,'typeText', type);
				this.$set(this.details,'levelText', level);
				await uni.hideLoading();
			},
			// 暂停/恢复业务合作
			business(){
				this.$refs.stopTask.open();
			},
			cooperation(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				cooperationApi({
					id: this.id,
					cooperationStatus: !this.details.cooperationStatus
				}).then(() => {
					this.getCustomerDetails();
					uni.showToast({
						icon:'success',
						title:'操作成功'
					})
				}).catch(() => {
					uni.hideLoading();
				})
				this.$refs.stopTask.close();
			},
			// 删除客户
			cancelCustomer(){
				this.$refs.cancelCustomer.open();
				this.$refs.operation.close();
			},
			confireCancel(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				deleteCustomerApi(this.id).then(() => {
					uni.hideLoading();
					uni.showToast({
						icon:'success',
						title:'删除成功'
					})
					this.empty = true;
				}).catch(() => {
					uni.hideLoading();
				})
				this.$refs.cancelCustomer.close();
			},
			// 编辑客户
			edit(){
				this.$refs.operation.close();
				uni.navigateTo({
					url: `/pages/index/customer/edit?details=${JSON.stringify(this.details)}`
				})
			},
			moreOperation(){
				this.$refs.operation.open();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		@include flex-c;
		padding: 24rpx 0;
		.custome-sheet{
			flex: 0 0 auto;
			@include box;
			@include list;
			margin: 0 28rpx;
		}
		.tab-list{
			flex: 0 0 auto;
			@include flex-r-evely-center;
			padding: 34rpx 28rpx 0;
			.tab-item{
				color: #101010;
				font-size: 28rpx;
				text-align: center;
				&::after{
					content: '';
					display: block;
					width: 120rpx;
					height: 6rpx;
					border-radius: 10rpx;
					background-color: transparent;
					margin-top: 10rpx;
				}
				&.tab-select{
					color: #1684fc;
					&::after{
						background-color: #1684fc;
					}
				}
			}
		}
		.container{
			flex: 1 0 0;
			overflow: auto;
			&::-webkit-scrollbar{
				display: none;
			}
		}
		.footer{
			flex: 0 0 auto;
			padding: 24rpx 30rpx 0;
			@include flex-r-between-start;
			button{
				@include button;
				color: #fff;
				width: 45%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				background-color: #198AFA;
			}
		}
		// 更多操作弹出框样式
		.more-operation{
			width: 400rpx;
			background-color: #fff;
			@include box;
			.operation-item{
				@include flex-r-center-center;
				font-size: 28rpx;
				line-height: 100rpx;
				border-bottom: #d0d0d0 4rpx solid;
				&:last-child{
					border-bottom: none;
				}
				.icon{
					padding-right: 20rpx;
				}
			}
		}
		//对话框样式
		.model-popup{
			width: 600rpx;
			background-color: #fff;
			@include box;
			border-radius: 16rpx;
			.top{
				padding: 24rpx 40rpx 56rpx;
				.title{
					color: #101010;
					font-size: 36rpx;
					text-align: center;
					padding: 0 0 34rpx;
				}
				.content{
					color: #747474;
					font-size: 28rpx;
					text-align: center;
				}
			}
			.bottom{
				@include flex-r;
				border-top: 4rpx #F0F0F2 solid;
				button{
					@include button;
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					background-color: #fff;
					border-radius: 0;
				}
				.cancel{
					color: #BBBBBB;
					border-right: 4rpx #F0F0F2 solid;
				}
				.confire{
					color: #4095E5;
				}
			}
		}
	}
</style>